<template>
  <div>
    <v-card>
      <v-container class="pa-2">
        <v-row class="pa-2">
          <h1>设置纸壁</h1>
        </v-row>
        <v-row>
          <v-col v-for="(paper, i) in paginatedPapers" :key="i" md="2">
            <v-img
              :src="paper.picture"
              @click="changImg(paper)"
              max-height="100"
              max-width="180"
              class="imgstyle"
              ><span class="imgspan">预览</span></v-img
            >
          </v-col>
        </v-row>
        <v-row align="center">
          <v-col cols="3">
            <base-btn
              v-if="page !== 1"
              class="ml-0"
              square
              title="Previous page"
              @click="page--"
            >
              <v-icon>mdi-chevron-left</v-icon>
            </base-btn>
          </v-col>

          <v-col class="text-center subheading" cols="6">
            第 {{ page }} 页<span>&nbsp;&nbsp;&nbsp;</span>共 {{ pages }} 页
          </v-col>

          <v-col class="text-right" cols="3">
            <base-btn
              v-if="pages > 1 && page < pages"
              class="mr-0"
              square
              title="Next page"
              @click="page++"
            >
              <v-icon>mdi-chevron-right</v-icon>
            </base-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
    <v-dialog v-model="dialog" max-width="800">
      <v-card>
        <v-img :src="wallpapers.picture" max-height="500" width="100%" />
        <!-- max-width="780" -->
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" text @click="dialog = false">
            取消
          </v-btn>

          <v-btn color="green darken-1" text x-large @click="setCardImg">
            设为纸壁
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
export default {
  props: {
    papers: {
      type: Array,
      default: () => ({}),
    },
  },

  computed: {
    pages() {
      return Math.ceil(this.papers.length / 18)
    },
    paginatedPapers() {
      const start = (this.page - 1) * 18
      const stop = this.page * 18

      return this.papers.slice(start, stop)
    },
  },

  data: () => ({
    wallpapers: {},
    dialog: false,
    page: 1,
  }),

  methods: {
    changImg(data) {
      this.wallpapers = data
      this.dialog = true
    },
    setCardImg() {
      this.$emit('getNum', this.wallpapers._id)
      this.dialog = false
    }
  },
}
</script>

<style>
.imgspan {
  opacity: 0;
  font-size: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
}
.imgstyle:hover {
  opacity: 0.3;
}
.imgstyle:hover .imgspan {
  opacity: 1;
}
</style>
